<template>
  <div>
    <p>vuw2vue3双向绑定</p>
    <div>
      <p>vue2双向绑定</p>
      <p>在当前目录下的vue2双向.html页面</p>
    </div>
    <div>
      <p>vue3双向绑定</p>
      <p>在当前目录下的vue3双向.html页面</p>
      <button @click="changeArr">changeArr</button>
      {{ state.arr }}
      <button @click="addBtn">addBtn</button>
      <br />
      {{ obj }}
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      arr: [1, 2, 3, 4, 5],
    });

    interface objType {
      name: string;
      year: number;
      sex?: string;
    }
    const obj: objType = reactive({
      name: "luo",
      year: 27,
    });

    const addBtn = () => {
      obj.sex = "男";
    };

    const changeArr = () => {
      state.arr[0] = 9;
    };
    return {
      state,
      obj,
      addBtn,
      changeArr,
    };
  },
});
</script>
